<template>
  <div class="change-steps">
    <div class="step first" @click="choose(1)" :class="{chooseBtn:active===1}"></div>
    <div class="arrow"></div>
    <div class="step two" @click="choose(2)" :class="{chooseBtn:active===2}"></div>
    <div class="arrow"></div>
    <div class="step three" @click="choose(3)" :class="{chooseBtn:active===3}"></div>
  </div>
</template>


<script>
export default {
  props:["stepData"],
  data() {
    return {
      active:0,
    }
  },
  methods: {
    init(){
      this.active = this.stepData;
    },
    choose(val){
      this.active = val;
      switch (val){
        case 1:
          this.$router.push({name:"changeBed01"});
          break;
//        case 2:
//          this.$router.push({name:"changeBed02"});
//          break;
      };
    },
  },
  components: {

  },
  mounted() {

    this.init()
  }
}
</script>


<style>
  .change-steps{
    width: 670px;
    margin: 0 auto 50px!important;
  }
  .change-steps .step{
    display: inline-block;
    width: 174px;
    height: 46px;
  }
  .change-steps .arrow{
    display:inline-block;
    width: 34px;
    height: 21px;
    background: url("../../img/arrow.png") no-repeat;
    margin: -10px 15px 0;
    vertical-align: middle;
  }
  .change-steps .step.first{
    background: url("../../img/mchange-01.png") no-repeat;
  }
  .change-steps .step.two{
    background: url("../../img/mchange-02.png") no-repeat;
  }
  .change-steps .step.three{
    background: url("../../img/mchange-03.png") no-repeat;
  }
  .change-steps .step.chooseBtn{
    background-position-y: -54px;
  }
</style>
